<template>
	<view class="container container-bg">
		<!-- 添加钻机 -->
		<u-form :model="form" :border-bottom="false" ref="uForm" label-width="auto">
			<u-form-item label-width="120" required="true" label="钻机价格" prop="drill_price">
				<u-input v-model="form.drill_price" placeholder="请输入钻机价格" />
			</u-form-item>
			<u-form-item label-width="120" required="true" label="购买时间" prop="drill_buy_date">
				<u-input v-model="form.drill_buy_date" placeholder="请选择购买时间" type="select" :select-open="timeShow" @click="timeShow = true" />
				<u-picker mode="time" v-model="timeShow" @confirm="timeConfirm"></u-picker>
			</u-form-item>
			<u-form-item label-width="120" required="true" label="钻机状态" prop="drill_status">
				<u-input v-model="form.drill_status" placeholder="请选择钻机状态" type="select" :select-open="statusShow" @click="statusShow = true" />
				<u-select v-model="statusShow" @confirm="selectStatus" :list="statusList"></u-select>
			</u-form-item>
			<u-form-item label-width="120" required="true" label="钻机编号" prop="drill_id">
				<view class="u-flex">
					<u-input class="u-flex-1" disabled="true" v-model="form.drill_id" placeholder="请点击获取钻机编号" />
					<u-button v-if="!form.drill_id" class="u-margin-left-20" :disabled="getDrillIDdisable" type="primary" @click="getDrillID" size="mini">点击获取编号</u-button>
				</view>
			</u-form-item>
			<u-form-item label-width="120" label-position="top" required="true" label="维修记录(如果更换了配件请记住上传购买配件)">
				<view v-for="(item,index) in form.maintain_record" :key="index" class="w-x_item u-margin-bottom-20 u-padding-10 z-b-r u-flex">
					<view class="u-flex-1">
						<u-input v-model="item.maintainDate" type="select" :select-open="item.maintainTimeShow" @click="maintainTimeSelect(index)"
						 placeholder="请选择维修时间" />
						<u-picker mode="time" v-model="item.maintainTimeShow" @confirm="maintainTimeConfirm"></u-picker>
						<u-input v-model="item.maintainParts" placeholder="请输入维修描述" />
					</view>
					<view class="z-font-lg delete-m u-padding-10" @click="maintainDelete(index)">
						<u-icon name="close"></u-icon>
					</view>
				</view>
				<view class="add_w-x u-padding-10 u-text-center z-font-lg z-b-r" hover-class="h-class" @click="addMaintain">
					<u-icon name="plus"></u-icon>添加维修记录
				</view>
			</u-form-item>
		</u-form>
		<u-modal v-model="maintainShow" @confirm="deleteConfirm" content="确认删除吗？" show-cancel-button="true"></u-modal>
		<u-button class='u-margin-20' :disabled="submitBtnDis" type="primary" @click="submit">确认添加</u-button>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState} from "vuex";
	import getRandomID from "@/common/getRandomID.js";
	export default {
		data() {
			return {
				submitBtnDis: false, // 提交按钮
				timeShow: false, //添加时间
				maintainShow: false, //
				curMaintainIndex: -1,
				getDrillIDdisable:false,
				statusShow:false,
				form: {
					drill_id: '',
					drill_price: "",
					drill_buy_date: "",
					drill_status:"", //0未分配  1已分配
					maintain_record: [] //多个记录可以为空
				},
				statusList:[
					{
						value: 0,
						label: '未分配使用'
					},
					{
						value: 1,
						label: '钻机使用中'
					}
				],
				rules: {
					drill_price: [{
						required: true,
						message: '请输入钻机价格',
						trigger: ['blur', 'change']
					}],
					drill_id: [{
						required: true,
						message: "请点击获取钻机id",
						tigger: ['blur', 'change']
					}],
					drill_buy_date: [{
						required: true,
						message: "请选择钻机购买时间",
						trigger: ['blur', 'change']
					}],
					drill_status:[{
						required: true,
						message: "请选择钻机状态",
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(params) {
			// 修改时获取数据
			if(Object.keys(params).length > 0){
				this.getDrillData(params.drillID)
			}
		},
		computed:{
			...mapState({
				token: "token",
				wkID:"wkID",
				pm_company:"pm_company"
			})
		},
		// 设置校验规则
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async getDrillData(_id){
				this.$loading("正在加载")
				let res = await this.$network({
					api:"main",
					data:{
						action:"disposeData/getOneDrillInfo",
						data:{
							_id
						}
					}
				})
				uni.hideLoading();
				if(res.status === 0){
					Object.assign(this.form,res.data[0]);
				}
			},
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						this.submitBtnDis = true;
						this.form.pm_company = this.pm_company;
						this.$loading("正在保存")
						let res = await this.$network({
							api: "main",
							data:{
								action:"disposeData/setDrillInfo",
								data:this.form
							}
						});
						uni.hideLoading();
						this.submitBtnDis = false;
						if (res.status === 0) {
							Object.assign(this.$data,this.$options.data())
							this.$refs.uToast.show({
								title: '保存成功',
								type: 'success'
							})
						}
					}
				})
			},
			//获取钻机编号
			getDrillID() {
				this.$loading("正在获取");
				this.getDrillIDdisable = true;
				// （di+8位随机数）
				var id = getRandomID();
				this.checkDrillID("di"+id);
			},
			async checkDrillID(id){
				var res = await this.$network({
					api: "main",
					data: {
						action:"disposeData/checkDrillID",
						data:{
							id
						}
					}
				});
				
				if (res.status === 0) {
					uni.hideLoading();
					this.form.drill_id = id;
				} else if (res.status === 1) {
					this.getDrillID(); // 重复，重新获取
					this.getDrillIDdisable = false;
				}
			},
			//购买时间
			timeConfirm(params) {
				let {day,month,year} = params;
				this.form.drill_buy_date = `${year}-${month}-${day}`;
			},
			//添加维修记录
			addMaintain() {
				this.form.maintain_record.push({
					maintainDate: "",
					maintainParts: "",
					maintainTimeShow: false
				})
			},
			//删除维修记录
			maintainDelete(index) {
				this.maintainShow = true;
				this.curMaintainIndex = index;
			},
			deleteConfirm() {
				this.form.maintain_record.splice(this.curMaintainIndex, 1);
			},
			//选择维修时间
			maintainTimeSelect(index) {
				this.form.maintain_record[index].maintainTimeShow = true;
				this.curMaintainIndex = index;
			},
			maintainTimeConfirm(params) {
				let {day,month,year} = params;
				let {curMaintainIndex} = this;
				this.form.maintain_record[curMaintainIndex].maintainDate = `${year}-${month}-${day}`;
			},
			//钻机状态
			selectStatus(params){
				this.form.drill_status = params[0].label;
			}
		}
	}
</script>

<style lang="scss">
	.add_w-x {
		background-color: #F8F8F8;
	}

	.w-x_item {
		border: 1rpx solid #C0C0C0;
	}

	.delete-m {
		color: $uni-color-warning;
	}
</style>
